<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
            
        }
        .p1{
            width: 1000px;
            height: 1000px;
            float: left;
        }
        .p2{
            font-size: 31px;
            position: relative;
            left: 548px;
          
        }

    </style>
</head>

<body>
    <h2 class="p2">热销爆款</h2>
    <div class="p1">
           <ul class="ar_ul">
        <li>
        </li>
    </ul> 
    </div>
    <h2>全部商品</h2>
    <h3>总价</h3>
    <span class="zong">0</span>
    <button onclick="qing()">清空购物车</button>
    <ul class="arr_ul">
    </ul>
    <button onclick="fn()">去结算</button>
    <script>
        var arr = [{
            id: 1,
            name: '小米',
            price: 1699,
            img: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/118425/20/2534/23515/5ea2e48cE8d9e5fe7/5a820226fb2f4787.jpg!q80.dpg'
        }, {
            id: 2,
            name: '平板电脑',
            price: 1699,
            img: 'https://imgservice.suning.cn/uimg1/b2c/image/JkjGOhfyuN3CAGhj_sywiw.jpg_800w_800h_4e'
        }, {
            id: 3,
            name: '生活电器',
            price: 699,
            img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.G7ibfiNvU8ZVHl8JP6asrAHaHa?rs=1&pid=ImgDetMain'
        }, {
            id: 4,
            name: '洗衣机',
            price: 2699,
            img: 'https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619031590461.jpg'
        }, {
            id: 5,
            name: '冰箱',
            price: 1299,
            img: 'https://dsdcp.smartmidea.net/mcsp/prod/20210422/1619027397408.jpg'
        }, {
            id: 6,
            name: '厨房大电',
            price: 599,
            img: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/151840/31/6289/158333/5fb25185E8efc5bee/c297ddb81ecb930a.jpg!q80.dpg'
        },]
        // 获取
        var ul1 = document.querySelector('.ar_ul')
        //  渲染
        function xr() {
            arr.forEach(item => {
                ul1.innerHTML += `
            <li>
            <img src="${item.img}" alt="">
             <span>${item.name}</span>
            <span>${item.price}</span>
            <button onclick="jia(${item.id})">加入购物车</button>
        </li>`
            })
        } xr()
        // 购物车数组
        var ar = []
        //  渲染购物车数组
        var ul2 = document.querySelector('.arr_ul')
        function xrr() {
            ul2.innerHTML = ''
            ar.forEach(item => {
                ul2.innerHTML += `
            <li>
            <img src="${item.img}">
            <span>${item.name}</span>
            <span>${item.price}</span>
            <button onclick='jian(${item.id})'>—</button>
            <span>${item.num}</span>
            <button onclick='he(${item.id})'>+</button>
            <button onclick='shan(${item.id})'>删除</button>
            </li>
                `
            })
        } xrr()
        // 总价
        var zong = document.querySelector('.zong')
        function xrr_money() {
            var money = 0
            ar.forEach(item => {
                money += item.price * item.num
            })
            zong.innerHTML = money
        }
      
        xrr_money()
        //    加入购物车
        function jia(i) {
            var a = arr.find(item => item.id == i)
            ar.push({
                id: ar.length + 1,
                img: a.img,
                name: a.name,
                price: a.price,
                num: 1
            })
            xrr()
            xrr_money()
        }
        //    -
        function jian(iid) {
            var a = ar.find(item => item.id == iid)
            if (a.num > 1) {
                a.num--
            }

            xrr()
            xrr_money()
        }
        // +
        function he(i) {
            var a = ar.find(item => item.id == i)
            a.num++
            xrr()
            xrr_money()  
        }
        // 删除
        function shan(i){
                 var a=ar.find(item=>item.id=i)
                ar.splice(a,1)
                xrr()
                xrr_money()
        }

       function fn(){
          location.assign('./5.30.跳转结算.html')
       }
    //    清空购物车
       function qing(){
        ar.innerHTML=''
        ar=[]
        zong.innerHTML=''
        xrr()
    }
    </script>
</body>

</html>